<template>
  <div class="content">
    <div class="title" v-if="hideTitle">
      <div class="title-left">
        <div
          :class="num == 1 ? 'title-choose' : 'title-choose-two'"
          @click="selectn(1)"
        >
          <span>关注</span>
          <div class="shu"></div>
        </div>
        <div
          :class="num == 2 ? 'title-choose' : 'title-choose-two'"
          @click="selectn(2)"
        >
          <span>精选</span>
          <div class="shu"></div>
        </div>
        <div
          :class="num == 3 ? 'title-choose' : 'title-choose-two'"
          @click="selectn(3)"
        >
          <span>圈子</span>
          <div class="shu"></div>
        </div>
      </div>
      <div class="title-right">
        <Input search v-model="seachValue" @on-search="searchChange" placeholder="搜索话题/我关注人的话题" />
      </div>
    </div>

    <!-- 内容 -->
    <div class="main">
      <router-view :seachVal="seachValue"></router-view>
      <!-- <follow v-if="num == 1"></follow>
      <selected v-if="num == 2"></selected>
      <circlen v-if="num == 3"></circlen> -->
    </div>
    <!-- 内容 -->
  </div>
</template>

<script>
import follow from "./follow.vue";
import selected from "./selected.vue";
import circlen from "./circle.vue";
// import activeLive from './activeLive.vue'
export default {
  data() {
    return {
      // 隐藏标题的社区路由
      hideList: ['/active-index','/active-detail','/active-signup'],
      num: 1,
      select: "公开的",
      list: [
        {
          title: "公开的",
          icon: "md-people",
          color: "yellow",
        },
        {
          title: "同步到圈子",
          icon: "md-sync",
          color: "red",
        },
        {
          title: "仅自己可见",
          icon: "ios-eye-off",
          color: "purple",
        },
      ],
      data: [
        {
          id: 1,
          tit: "参加海豚瑜伽挑战赛，唤醒本色，本就出色！",
          time: "2022-09-12 12:00~2022-09-12 12:00",
          status: "活动进行中",
        },
        {
          id: 2,
          tit: "参加海豚瑜伽挑战赛，唤醒本色，本就出色！",
          time: "2022-09-12 12:00~2022-09-12 12:00",
          status: "活动进行中",
        },
        {
          id: 3,
          tit: "参加海豚瑜伽挑战赛，唤醒本色，本就出色！",
          time: "2022-09-12 12:00~2022-09-12 12:00",
          status: "活动进行中",
        },
      ],
      value: "",
      name: -1,
      seachValue:''
    };
  },
  components: {
    follow,
    selected,
    circlen,
    // activeLive
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(vm.$route,'vm---');
      if(vm.$route.query.num)
      vm.num = vm.$route.query.num
    });
  },
  computed: {
    hideTitle() {
      return !this.hideList.includes(this.$route.path)
},
  },
  methods: {
    searchChange(val){
      console.log(val,'val');
    },
    // 切换三个状态
    selectn(v) {
      this.num = v;
      if (v == 1) {
        this.$router.push("/follow");
      } else if (v == 2) {
        this.$router.push("/selected");
      } else if (v == 3) {
        this.$router.push("/circle");
      }
    },
    change(v) {
      this.name = v;
    },

    // 关注的模拟数据
  },
};
</script>

<style lang="scss" scoped>
.content {
  // padding: 10px;
  .top {
    background-color: #fff;
    padding: 10px;
    .top-header {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .youlive {
        width: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        span {
          // display: inline-block;
          width: 100%;
        }
      }
      .top-header-input {
        width: 100%;
        ::v-deep.top-input {
          margin: 10px 0;
          width: 100% !important;
        }
      }
    }
    .textarea {
      width: 100%;
      height: 100px;
      border: 1px solid #f00;
      outline: #f00;
      padding: 10px;
    }
    .live {
      display: flex;
      justify-content: space-between;
      .live-left,
      .live-right {
        display: flex;
      }
      .live-left {
        .video {
          margin-left: 20px;
        }
      }
      .live-right {
        .drop {
          .defult {
            display: flex;
            align-items: center;
          }
          .dropMenu {
            .dropItem {
              display: flex;
              align-items: center;
              .icon {
                width: 20px;
              }
              .title {
                flex: 1;
                text-align: center;
              }
            }
          }
        }
        .sub {
          color: #fff;
          background-color: #f00;
          border: none;
          width: 80px;
          height: 20px;
          margin-left: 30px;
        }
      }
    }
  }
  .title {
    width: 100%;
    height: 50px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .title-left {
      width: 40%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      cursor: pointer;
      .title-choose {
        width: 25%;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        span {
          width: 100%;
          text-align: center;
          font-size: 16px;
          color: #f00;
        }
        .shu {
          width: 20%;
          height: 2px;
          background-color: #f00;
        }
      }
      .title-choose-two {
        width: 25%;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        span {
          width: 100%;
          text-align: center;
          font-size: 16px;
          // color: #f00;
        }
        .shu {
          width: 20%;
          height: 2px;
          // background-color: #f00;
        }
      }
    }
    .title-right {
      width: 40%;
      height: 100%;
      // background-color: #000;
      display: flex;
      align-items: center;
    }
  }
  // 新增关注内容
  .platform-activities {
    width: 100%;
    height: 231px;
    // border: 1px solid red;
    margin-bottom: 32px;
    .platform-activities-tit {
      width: 100%;
      height: 41px;
      // border: 1px solid red;
      padding: 0 14px;
      background-color: #e4e3f5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      .platform-activities-tit-span {
        width: 62px;
        height: 20px;
        border-radius: 20px;
        background-color: #fff;
        color: #333333;
        font-size: 9px;
        text-align: center;
        line-height: 20px;
      }
    }
    .platform-activities-contain {
      width: 100%;
      height: 62px;
      padding: 0 14px;
      // border: 1px solid red;
      border-bottom: 1px solid #ececec;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .platform-activities-left {
        color: #333333;
        font-size: 9px;
        font-weight: 500;
        color: #333333;
        .platform-activities-left-span {
        }
        .platform-activities-left-time {
          font-size: 8px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #878583;
        }
      }
      .platform-activities-left-img {
        width: 10px;
        height: 10px;
      }
      .coming {
        width: auto;
        height: 18px;
        border-radius: 3px 0px 0px 3px;
        background-color: #dcf8ee;
        color: #35b572;
        font-size: 8px;
        text-align: center;
        line-height: 18px;
        padding: 0 10px;
      }
    }
  }
  .main {
    width: 100%;
    height: 600px;
    // border: 1px solid red;
  }
}
</style>
